
import Icon from '@ant-design/icons';
import * as THREE from 'three';
import { Button, List } from "antd";
import React from "react";
import styles from '../../index.module.less';
import { ReactComponent as CubeSvg } from './cube.svg';
import Controller from 'Controller'

export default function SpotLight() {

    const threeController = Controller.instance.useMemo(s => s.threeController, [])

    const onClick = React.useCallback(() => {
        const light = new THREE.SpotLight();
        light.name = '聚光灯-' + light.uuid;
        light.color = new THREE.Color(0xffffff);
        light.intensity = 0.3;
        light.distance = 30;
        light.shadow.camera.near = 4;
        light.shadow.camera.far = 2000;
        light.shadow.mapSize.width = 1024;
        light.shadow.mapSize.height = 1024;
        threeController.sceneAdd(light);
    }, [threeController])

    return (
        <List.Item actions={[<Button type="link" onClick={onClick} >添加</Button>]}>
            <span className={styles.icon} >
                <Icon component={CubeSvg} />
            </span>
            聚光灯
        </List.Item>
    )
}